<template>
  <view class="auxiliary-manage-container">
    <z-paging ref="paging" v-model="materialList" @query="loadMaterialList">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <uni-search-bar @confirm="search" v-model="queryParams.name" placeholder="搜索辅料名称" />
    </view>

    <!-- 物料列表 - 使用uni-card组件 -->
    <view class="material-cards">
      <uni-card v-for="item in materialList" :key="item.id" :title="item.materialName" extra="辅料信息"
        class="material-card">
        <view slot="actions" class="card-actions">
          <button size="mini" type="primary" class="edit-btn" @click="editMaterial(item)">编辑</button>
        </view>
        <view class="card-body">
          <view class="info-item">
            <text class="info-label">类别：</text>
            <text class="info-value">{{ getCategoryText(item.category) }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">型号：</text>
            <text class="info-value">{{ item.model }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">规格：</text>
            <text class="info-value">{{ item.specification }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">单位：</text>
            <text class="info-value">{{ item.unit }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">数量：</text>
            <text class="info-value num">{{ item.num }}</text>
          </view>
        </view>
      </uni-card>

      <!-- 空状态提示 - 修改条件检查，确保materialList存在 -->
      <view class="empty-state" v-if="!materialList || materialList.length === 0">
        <uni-icons type="inbox" size="50" color="#cccccc"></uni-icons>
        <text class="empty-text">暂无辅料数据</text>
      </view>
    </view>

    <!-- 编辑弹窗内容 -->
    <uni-popup ref="editPopup" type="dialog">
      <view class="edit-popup-content">
        <view class="popup-title">编辑辅料信息</view>
        <view class="form-item">
          <text class="form-label">类别</text>
          <uni-easyinput v-model="editForm.category" placeholder="请输入类别" />
        </view>
        <view class="form-item">
          <text class="form-label">辅料名称</text>
          <uni-easyinput v-model="editForm.materialName" placeholder="请输入辅料名称" />
        </view>
        <view class="form-item">
          <text class="form-label">型号</text>
          <uni-easyinput v-model="editForm.model" placeholder="请输入型号" />
        </view>
        <view class="form-item">
          <text class="form-label">规格</text>
          <uni-easyinput v-model="editForm.specification" placeholder="请输入规格" />
        </view>
        <view class="form-item">
          <text class="form-label">单位</text>
          <uni-easyinput v-model="editForm.unit" placeholder="请输入单位" />
        </view>
        <view class="form-item">
          <text class="form-label">数量</text>
          <uni-number-box v-model="editForm.num" :min="0" />
        </view>
        <view class="popup-buttons">
          <button class="cancel-btn" @click="cancelEdit">取消</button>
          <button class="confirm-btn" type="primary" @click="confirmEdit">确定</button>
        </view>
      </view>
    </uni-popup>
  </z-paging>
  </view>
</template>

<script>
import { listAuxiliary } from "@/api/mes/auxiliary"
import { getDicts } from "@/api/system/dict/data" // 引入字典API

export default {
  data() {
    return {
      searchKeyword: '',
      materialList: [], // 确保初始化为空数组而不是undefined
      transport_type: [],
      order_status: [],
      driver_list: [],
      auxiliary_type : [],
      editForm: {
        id: null,
        category: '',
        materialName: '',
        model: '',
        specification: '',
        unit: '',
        num: 0
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null
      },
      loading: false
    }
  },
  created() { 
    this.getDictData(); //
  },
  methods: {
    loadMaterialList(pageNo, pageSize) {
      // 确保接收并使用分页参数
      this.queryParams.pageNum = pageNo;
      this.queryParams.pageSize = pageSize;
      this.loading = true;
      
      // 显示加载中提示
      uni.showLoading({
        title: '加载中...',
        mask: true
      });
      
      // 调用真实API
      listAuxiliary(this.queryParams).then(response => {
          if (response.code === 200) {
            // 将API返回的数据映射到组件需要的格式
           const processedData = response.rows.map(item => ({
              id: item.id,
              materialCode: item.auxiliaryCode || '',
              category: item.auxiliaryType || '',
              materialName: item.name || '',
              model: item.model || '',
              specification: item.specifications || '',
              unit: item.unit || '',
              num: item.num || 0
            }));
            // 使用complete方法传递数据给z-paging
            this.$refs.paging.completeByTotal(processedData,response.total);
          } else {
            // 出错时也需要调用complete方法
            this.$refs.paging.complete(false);
            throw new Error(response.msg || '获取辅料列表失败');
          }
        })
        .catch(error => {
          console.error('获取辅料列表失败：', error);
          // 出错时调用complete方法并传递false
          this.$refs.paging.complete(false);
          uni.showToast({
            title: '获取辅料列表失败',
            icon: 'none'
          });
        })
        .finally(() => {
          uni.hideLoading();
          this.loading = false;
        });
    },

    // 搜索方法
    search() {
      // 重置页码并触发重新加载
      this.$refs.paging.reload();
    },
    getDictData() {
      getDicts('transport_type').then(response => {
        this.transport_type = response.data.map(item => ({
          value: item.dictValue,
          text: item.dictLabel
        }));
      });
      getDicts('order_status').then(response => {
        this.order_status = response.data
      });
      getDicts('auxiliary_type').then(response => {
        this.auxiliary_type = response.data.map(item => ({
          value: item.dictValue,
          text: item.dictLabel
        }));
      });
    },
    
    // 根据类别值获取类别文本
    getCategoryText(categoryValue) {
      if (!categoryValue || !this.auxiliary_type || this.auxiliary_type.length === 0) {
        return categoryValue || '未知';
      }
      
      const category = this.auxiliary_type.find(item => item.value === categoryValue);
      return category ? category.text : categoryValue;
    },
  }
}
</script>

<style lang="scss" scoped>
.auxiliary-manage-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;

  .search-bar {
    margin-bottom: 20rpx;
  }

  .material-cards {
    display: flex;
    flex-direction: column;
    gap: 20rpx;

    .material-card {
      margin-bottom: 20rpx;

      /* 覆盖uni-card的一些默认样式 */
      :deep(.uni-card__header) {
        padding: 20rpx;
      }

      :deep(.uni-card__content) {
        padding: 10rpx 20rpx;
      }

      .card-actions {
        display: flex;
        justify-content: flex-end;
      }

      .edit-btn {
        font-size: 24rpx;
        padding: 6rpx 20rpx;
        line-height: 1.5;
        height: auto;
      }
    }

    .card-body {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16rpx;

      .info-item {
        display: flex;
        align-items: center;
        padding: 8rpx 0;

        .info-label {
          color: #666;
          font-size: 28rpx;
          min-width: 120rpx;
        }

        .info-value {
          color: #333;
          font-size: 28rpx;
          flex: 1;
        }

        .quantity {
          color: #007aff;
          font-weight: bold;
        }
      }
    }

    .empty-state {
      padding: 100rpx 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      border-radius: 12rpx;

      .empty-text {
        margin-top: 20rpx;
        color: #999;
        font-size: 28rpx;
      }
    }
  }

  .edit-popup-content {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    width: 600rpx;

    .popup-title {
      font-size: 32rpx;
      font-weight: bold;
      text-align: center;
      margin-bottom: 30rpx;
      color: #333;
    }

    .form-item {
      margin-bottom: 20rpx;

      .form-label {
        display: block;
        font-size: 28rpx;
        color: #666;
        margin-bottom: 10rpx;
      }
    }

    .popup-buttons {
      display: flex;
      justify-content: space-between;
      margin-top: 40rpx;

      button {
        flex: 1;
        margin: 0 10rpx;
        font-size: 28rpx;
      }

      .cancel-btn {
        background-color: #f5f5f5;
        color: #666;
      }
    }
  }
}
</style>